import React, { useEffect, useState } from 'react'
import "./home.css"
import { QrCode, Search, Eye } from '@nutui/icons-react'
import { Swiper } from 'antd-mobile';
// import Footer from "../../Footer.js"
import { InfiniteScroll, List, Popup } from 'antd-mobile'
import axios from 'axios'
import { sleep } from 'antd-mobile/es/utils/sleep'
import { Button } from "antd"
import { useNavigate } from 'react-router-dom';import Footer from '../../Footer'
export default function Home() {
  let navigate = useNavigate()
  const [page, setPage] = useState(1)
  const [data, setData] = useState([])
  const [hasMore, setHasMore] = useState(true)
  const [visible7, setVisible7] = useState(false)
  const [list, setList] = useState([])
  useEffect(() => {
    getlist()
  }, [])
  let getlist = async () => {
    let res = await axios.get('http://localhost:3000/getcate')
    setList(res.data.list)
  }
  let loadMore = async () => {
    const val = await axios.get('http://localhost:3000/getarticle', { params: { page: page, limit: 4 } })
    console.log(val.data);
    await sleep(2000)
    const newData = val.data.list
    setPage(page + 1)
    setData(prevData => [...prevData, ...newData])
    setHasMore(newData.length > 0)
    console.log(newData);
  }
  let items = [
    { id: 1, url: "https://img95.699pic.com/xsj/0w/gv/c7.jpg%21/fh/300" },
    { id: 2, url: "https://img95.699pic.com/photo/40168/3148.jpg_wh300.jpg" },
    { id: 3, url: "https://preview.qiantucdn.com/yay/neutral/e/43e/e43e0e2.jpg%21qt_h320" },
    { id: 4, url: "https://img.tukuppt.com/video_pic/00/00/00/5d7e4dc463b4e.jpg-0.jpg%21/fw/780/quality/90/unsharp/true/compress/true/crop/800x450a80a121" }
  ]
  return (
    <div>
      {/* 头部 */}
      <div className='header'>
        <h1 style={{ lineHeight: "65px", marginLeft: "2%" }}>首页</h1>
        <span style={{ marginTop: "20px" }}><QrCode width="25px" height="25px" onClick={() => { setVisible7(true) }} />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Search height="25px" width="25px" onClick={()=>navigate("/search")}/>&nbsp;&nbsp;&nbsp;</span>
      </div>
      <Popup
        visible={visible7}
        showCloseButton
        onClose={() => {
          setVisible7(false)
        }}
      >
        <div style={{ width: "100%", height: "660px" }}>
          <h2 style={{ marginLeft: "2%", marginTop: "2%" }}>选择领域</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "10px", paddingTop: "10%", paddingLeft: "5%" }}>
            {
              list.map(item => {
                return (
                  <Button type='primary' style={{ width: "80%" }} onClick={()=>navigate(`/zhuanxiang?id=${item._id}`)}>{item.name}</Button>
                )
              }
              )}
          </div>
        </div>
      </Popup>
      {/* 轮播图 */}
      <div className="demo-box" >
        <Swiper
          loop
          autoplay
        >
          {
            items.map((item, index) => {
              return (
                <Swiper.Item key={item.id}>
                  <div>
                    <img src={item.url} alt="" width="100%" height="200px" style={{ borderRadius: "5%" }} />
                  </div>
                </Swiper.Item>
              )
            })
          }
        </Swiper>

      </div>
      {/* 专题领域 */}
      <div style={{ width: "100%", height: "150px", backgroundColor: "rgb(247, 247, 255)", marginTop: "-60px" }}>
        <p style={{ display: "flex", justifyContent: "space-between" }}>
          <h2 style={{ marginLeft: "5%" }}>精选专题</h2>
          <span style={{ marginRight: "5%", marginTop: "4px", fontWeight: "bolder" }} onClick={()=>navigate("/zhuanti")}>查看全部&nbsp;＞</span>
        </p>
        <div style={{width:"100%",height:"100%",display:"flex",justifyContent:"space-around",marginTop:"3%"}} >
          {
            list.slice(0, 3).map(item => {
              return <div style={{ width: "20%", height: "20%", }} onClick={()=>navigate(`/zhuanxiang?id=${item._id}`)}>
                  <img src={item.img} alt='' width="100%" height="250%"></img>
                  <p style={{textAlign:"center",marginTop:"5%",fontWeight:"bolder"}}>{item.name}</p>
                </div>
            }
            )}
        </div>
      </div>
      <List>
        {data.map(item => (
          <List.Item key={item._id}  >
            <div style={{ position: "relative", display: "flex", justifyContent: "space-around", margin: "auto", backgroundColor: "" }} onClick={()=>navigate(`/context?id=${item._id}`)}>
              <div style={{ width: "50%" }}>
                <p style={{ width: "45%", fontWeight: "bolder", cursor: "point", position: "absolute", fontSize: '15px', top: "25px", left: "20px" }}>{item.title}</p>
                <div style={{ marginTop: "45%", marginLeft: "10%", display: "flex" }}><Eye width="10px" height="10px" /><div style={{ fontSize: "10px", width: "20px", marginLeft: "5%" }}>{item.views}</div><span style={{ marginLeft: "35%", fontSize: "10px" }}>{item.createTime}</span></div>
              </div>
              <div style={{ width: "50%", marginLeft: "25px", height: "110px", paddingTop: "15px" }}>
                <img src={item.img} alt="" style={{ width: "160px", height: "100px", borderRadius: "5%" }} />
              </div>
            </div>
          </List.Item>
        ))}
      </List>
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      <div style={{ width: "100%", height: '50px' }}></div>
      <Footer></Footer>
    </div>
  )
}
